import React, { useState } from 'react';
import { Form, Modal, Input, message, Icon } from 'antd';
import moment from 'moment';

import { download } from '@/utils/utils';

import LimitInput from '@/components/LimitInput';
import modelType from '@/pages/SalaryManage/SalaryCalculate/constant/modelTypeConstant';
import rejectStyles from '@/pages/SalaryManage/SalaryCalculate/Recheck/components/CheckHandle/index.less';

const ExcelExportModal = ({ form, modalVisible, dispatch, dispatchType, period }) => {
    const { getFieldDecorator } = form;

    //  弹窗=》确定按钮是否加载状态
    const [confirmLoad, setConfirmLoad] = useState(false);

    // 关闭弹窗
    const onRejectClose = () => {
        dispatch({
            type: dispatchType[modelType.E_EXCEL_EXPORT_MODEL],
            payload: false
        });
    };

    // 确认按钮
    const onRejectOk = () => {
        form.validateFields((errors, value) => {
            if (errors) {
                return;
            }
            setConfirmLoad(true);

            dispatch({
                type: dispatchType[modelType.E_EXCEL_EXPORT],
                payload: {
                    ...value
                },
                callback: response => {
                    download({
                        getData: () => response
                    });
                    message.success('导出成功');
                    onRejectClose();
                    setConfirmLoad(false);
                }
            });
        });
    };

    // 默认
    const getDefaultFileName = periodStr => (periodStr ? `${periodStr}薪资清单 ${moment().format('YYYYMMDD')}` : '');
    const getDefaultDescription = periodStr => (periodStr ? `${periodStr}薪资` : '');

    const title = 'Excel导出';

    return (
        <Modal
            title={title}
            visible={modalVisible}
            onOk={onRejectOk}
            onCancel={onRejectClose}
            destroyOnClose
            confirmLoading={confirmLoad}
        >
            <div className={rejectStyles.msg}>
                <Icon type="exclamation-circle" theme="filled" />
                请填写Excel表名及摘要
            </div>
            <Form layout="inline" className={rejectStyles.recheckForm} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
                <Form.Item label="Excel表名">
                    {getFieldDecorator('fileName', {
                        initialValue: getDefaultFileName(period),
                        rules: [
                            {
                                required: true,
                                message: 'Excel表名不能为空'
                            }
                        ]
                    })(<Input maxLength={20} />)}
                </Form.Item>
                <Form.Item label="摘要">
                    {getFieldDecorator('description', {
                        initialValue: getDefaultDescription(period),
                        rules: [
                            {
                                required: true,
                                message: '摘要不能为空'
                            }
                        ]
                    })(<Input maxLength={30} />)}
                </Form.Item>
                <Form.Item label="备注">
                    {getFieldDecorator('remark')(
                        <LimitInput rows={4} cols={45} maxLength={30} area showNumber placeholder="请输入" />
                    )}
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default Form.create()(ExcelExportModal);
